.connect-com {
  width: 100%;
  background: linear-gradient(90.21deg, #aa367c -5.91%, #4a2fbd 111.58%);
  padding: 60px 0 200px 0;

  .container {
    max-width: 1200px;
    margin: 0 auto;
    @include vC;
    justify-content: center;
    flex-direction: column;

    .contact-img {
      width: 50%;
      object-fit: cover;
    }
    .msg-box {
      margin-left: 88px;

      .title {
        font-size: 45px;
        font-weight: 700;
        margin: 60px 0;
        text-align: center;
      }
      .show-msg {
        p {
          width: 480px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 20px;
          color: #fff;
          padding: 18px 26px;
          font-weight: 500;
          font-size: 18px;
          letter-spacing: 0.8px;
          transition: 0.3s ea;
          font-size: 24px;
          margin-top: 36px;
          transition: 0.8s ease-in-out;
          opacity: 0;
          margin-bottom: 50px;
        }
        span {
          font-size: 18px;
          margin-left: 28px;
        }
        .active {
          opacity: 1;
          margin-bottom: 0;
        }
      }
    }
  }
}

@media screen and (max-width: 431px) {
  .connect-com {
    padding: 60px 0 100px 0;

    .container {
      flex-direction: column;
      .msg-box {
        margin-left: 0;
        .title {
          font-size: 24px;
        }
        .show-msg {
          p {
            width: 100%;
            font-size: 18px;
            padding: 9px 13px;
          }
          span {
            font-size: 16px;
            margin-left: 8px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 751px) {
  .connect-com {
    .container {
      flex-direction: column;
      .msg-box {
        margin-left: 0;
        .show-msg {
          p {
            width: 100%;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 752px) {
  .connect-com {
  }
}
